<template>
  <div class="loss">
    <!-- <div class="flex js-sp mb-20 text-14">
      <span class="textperson-t2">{{
        $t("exchange.currentProfitAndLoss")
      }}</span>
      <span class="color-red">{{countWinlose()}}</span>
    </div> -->
    <div class="flex js-sp mb-20 text-12 textperson-t2">
      <span>
        {{ $t("exchange.openingPrice") }}：{{
          $currency(param.lever_open_price)
        }}
      </span>
      <span class
        >{{ $t("exchange.currentTakeProfitPrice") }}：{{
          $currency(state.setparam.stop_win_price)
        }}</span
      >
      <span class
        >{{ $t("exchange.currentStopPrice") }}：{{
          $currency(state.setparam.stop_lose_price)
        }}</span
      >
    </div>
    <div class="textperson-t3 mb-4 text-left">
      {{ $t("exchange.takeProfitPrice") }}
    </div>
    <div class="mb-20" style="width:100%">
      <el-input-number
        :controls="false"
        v-model="state.setparam.stop_win_price"
        :precision="param.price_accuracy"
        :min="0"
      ></el-input-number>
    </div>
    <div class="textperson-t3 mb-4 text-left">
      {{ $t("exchange.stopPrice") }}
    </div>
    <div class="mb-30" style="width:100%">
      <el-input-number
        :controls="false"
        v-model="state.setparam.stop_lose_price"
        :precision="param.price_accuracy"
        :min="0"
      ></el-input-number>
    </div>
    <div
      class="btn share-color person-btn radius text-16"
      v-loading="state.loading"
      @click="confirm"
    >
      {{ $t("exchange.comfirm") }}
    </div>
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { setLeverProfit } from "@/api/currency";
import { useI18n } from "vue-i18n";
// import {countWinlose} from "@/utils/common"
export default {
  name: "Stoploss",
  props: { param: Object },
  emits: ["close"],
  setup(props, { emit }) {
    const { t } = useI18n();
    const state = reactive({
      setparam: {},
      loading: false,
    });
    onMounted(() => {
      state.setparam.stop_win_price = props.param?.stop_win_price;
      state.setparam.stop_lose_price = props.param?.stop_lose_price;
    });
    const confirm = () => {
      if (!state.setparam.stop_win_price) {
        ElMessage.error(t("lever.enprofit"));
        return;
      }
      if (!state.setparam.stop_lose_price) {
        ElMessage.error(t("lever.enloss"));
        return;
      }
      if (props.param.lever_type === 1) {
        //止盈价需大于开仓价
        if (
          state.setparam.stop_win_price &&
          state.setparam.stop_win_price <= props.param.lever_open_price
        ) {
          ElMessage.error(t("exchange.greaterTip1"));
          return;
        }
        // 止损价需小于开仓价
        if (
          state.setparam.stop_lose_price &&
          state.setparam.stop_lose_price >= props.param.lever_open_price
        ) {
          ElMessage.error(t("exchange.lessTip1"));
          return;
        }
      } else {
        //止盈价需小于开仓价
        if (
          state.setparam.stop_win_price &&
          state.setparam.stop_win_price >= props.param.lever_open_price
        ) {
          ElMessage.error(t("exchange.lessTip2"));
          return;
        }
        //止损价需大于开仓价
        if (
          state.setparam.stop_lose_price &&
          state.setparam.stop_lose_price <= props.param.lever_open_price
        ) {
          ElMessage.error(t("exchange.greaterTip2"));
          return;
        }
      }

      state.setparam.id = props.param.id;
      state.loading = true;
      setLeverProfit(state.setparam)
        .then((res) => {
          if (res.code === 200) {
            state.loading = false;
            ElMessage({
              type: "success",
              message: res.message,
            });
            state.setparam = {};
            emit("close");
          }
        })
        .catch(() => {
          state.loading = false;
        });
    };
    return {
      state,
      confirm,
    };
  },
};
</script>

<style scoped lang="less">
.loss {
  width: 100%;
  padding: 0 20px;
}
.color-red {
  color: #cf2f43;
}
.color-gree {
  color: #60ad76;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-4 {
  margin-bottom: 4px;
}
.el-input-number {
  width: 100%;
}
.btn {
  width: 100%;
  height: 42px;
  line-height: 42px;
}
</style>
